<template>
  <view>
    <z-paging
      ref="paging"
      :refresher-enabled="refresherEnable"
      v-model="listData"
      @query="init"
      :refresher-status.sync="refresherStatus"
    >
      <template #top>
        <view class="page-top">
          <u-search
            :clearabled="true"
            shape="square"
            v-model="keyword"
            @search="reload"
            @custom="reload"
            @clear="reload"
            placeholder="请输入查询关键字"
          ></u-search>
        </view>
      </template>
      <template #loading>
        <view class="loading-box flex-xy-center">
          <u-loading-icon size="18" text="加载中"></u-loading-icon>
        </view>
      </template>
      
      <view class="list-content">

        <u-collapse
          class="collapse-wrapper"
        >
          <u-collapse-item
            title="文档指南"
            name="Docs guide"
            v-for="(item, index) in listData" :key="index"
          >
            <view slot="title">
              <u-row style="width: 100%;">
                <view style="flex: 1.2;">
                  <text class="txt-primary" @click.stop="showModify(item)">{{ item.name }}</text>
                </view>
                <view style="flex: 1; text-align: left;"><text class="txt-info txt-small">库存：</text>{{ item.residualInventory }}</view>
                <view style="flex: 1; text-align: left;">
                  <text class="txt-info txt-small">出库存：</text>
                  <text class="txt-primary" @click.stop="showEdit(item)">{{ item.outbound }}</text>
                </view>
              </u-row>
            </view>
            <view class="list-item">
              <u-row style="flex-wrap: wrap; line-height: 1.8;">
                <u-row style="width: 50%;">
                  <view style="width: 70px;" class="txt-info">价格：</view>
                  <view style="flex: 1">
                    ￥{{ item.price }}
                  </view>
                </u-row>
                <u-row style="width: 50%;">
                  <view style="width: 70px;" class="txt-info">质量：</view>
                  <view style="flex: 1">
                    {{ item.quality }}
                  </view>
                </u-row>
                <u-row style="width: 50%;">
                  <view style="width: 70px;" class="txt-info">总库存：</view>
                  <view style="flex: 1">
                    {{ item.totalInventory }}
                  </view>
                </u-row>
                <u-row style="width: 50%;">
                  <view style="width: 70px;" class="txt-info">酒精度：</view>
                  <view style="flex: 1">
                    {{ item.alcoholicStrength }}°
                  </view>
                </u-row>
                <u-row style="width: 100%;">
                  <view style="width: 70px;" class="txt-info">执行标准：</view>
                  <view style="flex: 1">
                    {{ item.standard }}
                  </view>
                </u-row>
                <u-row style="width: 100%;">
                  <view style="width: 70px;" class="txt-info">成分：</view>
                  <view style="flex: 1">
                    {{ item.ingredient }}
                  </view>
                </u-row>
                <u-row style="width: 100%;">
                  <view style="width: 70px;" class="txt-info">备案号：</view>
                  <view style="flex: 1">
                    {{ item.recordNumber }}
                  </view>
                </u-row>
                <u-row style="width: 100%;">
                  <view style="width: 70px;" class="txt-info">门店：</view>
                  <view style="flex: 1">
                    {{ item.storeName }}
                  </view>
                </u-row>
              </u-row>
            </view>
          </u-collapse-item>
        </u-collapse>
        
      </view>
    </z-paging>

    <edit ref="edit" />
    <add ref="add" />

    <!-- v-if="roleStatus == 100" -->
    <view class="add" @click="showAdd">
      <u-icon name="plus" color="#ffffff"></u-icon>
    </view>
  </view>
</template>

<script>
  import dayjs from 'dayjs'
  import edit from './edit.vue'
  import add from './add.vue'
  export default {
    components: {
      edit, add
    },
    data() {
      return {
        listData: [],
        refresherEnable: true,
        keyword: '',
        pageNum: 1,
        pageSize: 20,
        hasNextPage: true,
        refresherStatus: 0
      }
    },
    watch: {
      refresherStatus(val) {
        if (val == 1) {
          this.pageNum = 1
        }
      }
    },
    computed: {
      roleStatus() {
        let globalData = getApp({allowDefault: true}).globalData
        return globalData.role
      }
    },
    onLoad() {

    },
    methods: {
      init() {
        let data = {
          "searchKey": this.keyword,
          "pageNum": this.pageNum,
          "pageSize": this.pageSize
        }
        this.$api.food.get(data)
        .then(res => {
          if (res.code == 200) {
            this.pageNum = this.pageNum + 1

            if (res.data.items.length == 0) {
              this.hasNextPage = false
            }

            this.$refs.paging && this.$refs.paging.complete(res.data.items);
          } else {
            uni.showToast({
              title: res.message,
	            duration: 2000
            })
          }
        })
        .catch(err => {
          uni.showModal({
            title: '提示',
            content: err.message,
            showCancel: false
          });
        })
      },
      // ---------------- 子组件内实现z-paging的mixin内的相应方法，并转发给z-paging组件 -------------------
      // 以下四个方法内的代码是固定不变的
      reload() {
        this.pageNum = 1;
        this.pageSize = 20;
        this.$refs.paging.reload();
      },
      updatePageScrollTop(scrollTop) {
        this.$refs.paging.updatePageScrollTop(scrollTop);
      },
      doChatRecordLoadMore() {
        if (!this.hasNextPage) return;
        this.$refs.paging.doChatRecordLoadMore();
      },
      pageReachBottom() {
        this.$refs.paging.pageReachBottom();
      },
      showEdit(item) {
        this.$refs.edit.open(item, status => {
          if(status) {
            this.reload()
          }
        })
      },
      showAdd() {
        this.$refs.add.open(null, status => {
          if(status) {
            this.reload()
          }
        })
      },
      showModify(item) {
        this.$refs.add.open(item, status => {
          if(status) {
            this.reload()
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .page-top {
    padding: 10px;
    background-color: #fff;
  }

  .loading-box {
    height: 40px;
  }
  
  .group-title {
    padding: 0 15px;
    font-size: 12px;
    color: #666;
  }

  .list-item {
    background: #ffffff;
    border-radius: 5px;

    &-sub {
      background: #f4f4f4;
      padding: 10px;
      border-radius: 5px;
    }
  }

  .add {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 99;
    width: 40px;
    height: 40px;
    background: hsl(206, 90, 20);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>